<template>
  <div style="height: 100%;overflow:auto;">
    <ProfessorList v-if="show == 1" ref="ProfessorListRef" :project-id="currentDetail.id" @next="onNextProfessor" />
    <DeptList  v-if="show == 2" ref="DeptListRef" :project-id="currentDetail.id" @next="onTotal" @pre="onPreProfessor" />
    <TotalList
        v-if="show == 3"
      ref="TotalListRef"
      :project-id="currentDetail.id"
      :detail="currentDetail"
      @pre="onPreTotal"
      @send="onSend"
    />
    <InviteMsg
      ref="InviteMsgRef"
      :current-detail="currentDetail"
      @success="onSuccess"
    />
  </div>
</template>

<script>
import ProfessorList from './professor-list'
import DeptList from './dept-list'
import TotalList from './total-list'
import InviteMsg from './invite-msg'
export default {
  name: 'UserInvite',
  components: {
    ProfessorList,
    DeptList,
    TotalList,
    InviteMsg
  },
  props: {
    currentDetail: Object
  },
  data() {
    return {
        show: '1',
    }
  },
  methods: {
    onNextProfessor() {
        this.show = '2'
    },
    onTotal() {
        this.show = '3'
    },
    onPreProfessor() {
        this.show = '1'
    },
    onPreTotal() {
        this.show = '2'
    },
    onSend() {
        this.$refs.InviteMsgRef.open()
    },
    onSuccess() {
      this.$emit('success')
    }
  }
}
</script>

<style scoped lang="scss">
</style>
